<template>

  <!--  试图-->
  <div>


    <el-dialog title="审批" :visible.sync="dialogFormVisibleDealt">
      <el-form :model="formDealt">
        <el-form-item label="任务ID" :label-width="formLabelWidth">
          <el-input disabled v-model="formDealt.taskId" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="审批意见" :label-width="formLabelWidth">
          <el-input v-model="formDealt.dealtOpinion" autocomplete="off"></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">驳 回</el-button>
        <el-button type="primary" @click="sureDealt">同 意</el-button>
      </div>
    </el-dialog>

    <el-dialog title="新增请假单" :visible.sync="dialogFormVisibleApply">
      <el-form :model="form">
      <el-form-item label="员工姓名" :label-width="formLabelWidth">
        <el-input v-model="form.employeeName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="员工部门" :label-width="formLabelWidth">
        <el-input v-model="form.department" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="请假类型" :label-width="formLabelWidth">
        <el-select v-model="form.leaveTypeId" placeholder="请选择请假类型">
          <el-option label="事假" value="1"></el-option>
          <el-option label="婚假" value="2"></el-option>
          <el-option label="丧假" value="3"></el-option>
          <el-option label="病假" value="4"></el-option>
          <el-option label="其他" value="5"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假开始时间" :label-width="formLabelWidth">
        <el-date-picker v-model="form.startTime" type="date" placeholder="选择开始时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="请假结束时间" :label-width="formLabelWidth">
        <el-date-picker v-model="form.endTime" type="date" placeholder="选择结束时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="请假事由" :label-width="formLabelWidth">
        <el-input type="textarea" v-model="form.leaveReason" placeholder="请输入请假事由"></el-input>
      </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addHolidayApply">提 交</el-button>
      </div>
    </el-dialog>


    <el-button type="primary" plain @click="openAddHolidayForm">新增申请请假单</el-button>

    <el-tabs v-model="activeName" @tab-click="handleClick">

      <el-tab-pane label="我的申请" name="first">

        <el-table
            :data="applyTableData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="id"
              width="180">
          </el-table-column>
          <el-table-column
              prop="employeeName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="leaveTypeId"
              label="请假类型">
            <template v-slot="scope">
              <span v-if="scope.row.leaveTypeId==1">事假</span>
              <span v-if="scope.row.leaveTypeId==2">婚假</span>
              <span v-if="scope.row.leaveTypeId==3">丧假</span>
              <span v-if="scope.row.leaveTypeId==4">病假</span>
              <span v-if="scope.row.leaveTypeId==5">其他</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveDuration"
              label="请假时常"
              width="180">
            <template v-slot="scope">
              {{scope.row.leaveDuration}}天
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveReason"
              label="请假事由"
              width="180">
          </el-table-column>
          <el-table-column
              label="申请状态"
              width="180">
            <template v-slot="scope">
              <span v-if="scope.row.status==1">未送审</span>
              <span v-if="scope.row.status==2">审核中</span>
              <span v-if="scope.row.status==3">待审核</span>
              <span v-if="scope.row.status==4">申请已通过</span>
              <span v-if="scope.row.status==5">申请被驳回</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template v-slot="scope">
              <el-button v-if="scope.row.status==1" @click="sendApply(scope.row.id)">送 审</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

      <el-tab-pane label="我的待办" name="second">

        <el-table
            :data="dealtTableData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="id"
              width="180">
          </el-table-column>
          <el-table-column
              prop="employeeName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="leaveTypeId"
              label="请假类型">
            <template v-slot="scope">
              <span v-if="scope.row.leaveTypeId==1">事假</span>
              <span v-if="scope.row.leaveTypeId==2">婚假</span>
              <span v-if="scope.row.leaveTypeId==3">丧假</span>
              <span v-if="scope.row.leaveTypeId==4">病假</span>
              <span v-if="scope.row.leaveTypeId==5">其他</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveDuration"
              label="请假时常"
              width="180">
            <template v-slot="scope">
              {{scope.row.leaveDuration}}天
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveReason"
              label="请假事由"
              width="180">
          </el-table-column>
          <el-table-column
              label="申请状态"
              width="180">
            <template v-slot="scope">
              <span v-if="scope.row.status==1">未送审</span>
              <span v-if="scope.row.status==2">审核中</span>
              <span v-if="scope.row.status==3">待审核</span>
              <span v-if="scope.row.status==4">申请已通过</span>
              <span v-if="scope.row.status==5">申请被驳回</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template v-slot="scope">
              <el-button @click="openDealt(scope.row)">审核</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

      <el-tab-pane label="我的已办" name="third">

        <el-table
            :data="finishTableData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="id"
              width="180">
          </el-table-column>
          <el-table-column
              prop="employeeName"
              label="姓名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="leaveTypeId"
              label="请假类型">
            <template v-slot="scope">
              <span v-if="scope.row.leaveTypeId==1">事假</span>
              <span v-if="scope.row.leaveTypeId==2">婚假</span>
              <span v-if="scope.row.leaveTypeId==3">丧假</span>
              <span v-if="scope.row.leaveTypeId==4">病假</span>
              <span v-if="scope.row.leaveTypeId==5">其他</span>
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveDuration"
              label="请假时常"
              width="180">
            <template v-slot="scope">
              {{scope.row.leaveDuration}}天
            </template>
          </el-table-column>
          <el-table-column
              prop="leaveReason"
              label="请假事由"
              width="180">
          </el-table-column>
          <el-table-column
              label="申请状态"
              width="180">
            <template v-slot="scope">
              <span v-if="scope.row.status==1">未送审</span>
              <span v-if="scope.row.status==2">等待审核</span>
              <span v-if="scope.row.status==3">申请已通过</span>
              <span v-if="scope.row.status==4">申请被驳回</span>
            </template>
          </el-table-column>
          <el-table-column
              fixed="right"
              label="操作"
              width="100">
            <template v-slot="scope">
              <el-button @click="handleClick(scope.row)">查看</el-button>
              <el-button>编辑</el-button>
            </template>
          </el-table-column>
        </el-table>

      </el-tab-pane>

    </el-tabs>



  </div>

</template>

<script>
export default {
  name: "ArgpHolidayView",
  data() {
    return {
      //默认属性
      activeName: 'first',
      dialogFormVisibleApply: false,
      formLabelWidth: '120px',
      form: '',
      applyTableData: [],
      dealtTableData: [],
      finishTableData: [],
      dialogFormVisibleDealt: false,
      formDealt: {},








    }
  }, methods: {
    //自定义方法
    sureDealt() {
      this.axios.post("system/holiday/sureDealt", this.formDealt).then(res => {
        if (res.data.code == 200) {
          this.$message.success(res.data.msg);
          this.formDealt = {};
          this.dialogFormVisibleDealt = false;
          this.dealtDataList();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },
    openDealt(row) {
      this.formDealt.taskId = row.taskId;
      this.dialogFormVisibleDealt = true;

    },
    sendApply(id) {//送审
      this.axios.get("system/holiday/sendApply", {params: {id: id}}).then(res => {
        if (res.data.code == 200) {
          this.$message.success("送审成功");
          this.applyDataList();
        } else {
          this.$message.error("送审失败")
        }
      });

    },

    addHolidayApply() {//新增申请请假单
      this.axios.post("system/holiday/insertHoliday", this.form).then(res => {
        if (res.data.code == 200) {
          this.$message.success("新增成功");
          this.dialogFormVisibleApply = false;
          this.applyDataList();
        } else {
          this.$message.error("新增失败")
        }
      });
    },

    openAddHolidayForm() {//打开新增申请请假单
      this.form = {}
        this.dialogFormVisibleApply = true;
    },
    handleClick(tab) {//通过tab.name来判断选择的是啥 first seconed thired
      if (tab.name == 'first') {
        this.applyDataList();
      }else if (tab.name == 'second') {
        this.dealtDataList();
      }else if (tab.name == 'third') {
        this.finshDataList();
      }
    },
    applyDataList() {//申请列表查询
      this.axios.get("system/holiday/applyDatadList").then(res => {
          this.applyTableData = res.data.data
      });
    },
    dealtDataList() {//待办列表查询
      this.axios.get("system/holiday/dealtDataList").then(res => {
          this.dealtTableData = res.data.data
      });
    },
    finshDataList() {//已办列表查询

    },

  }, created() {//初始化

  }
}
</script>

<style scoped>

</style>